<template>
	<view class="bg">
		<scroll-view scroll-x style="height: 180rpx; " class="m-left">
			<view class="category-menu">
				<view class="item" v-for="(item,index) in list" :key="index"
				 @tap="handleClick(item)">
				 <view class="item" v-if="activeCategory == item.id" >
				 	<view class="ip-thumb select-box" >
				 		<image mode="aspectFill" hover-class="hover" :src="item.thumb + '?x-oss-process=image/resize,w_250'"></image>
				 	</view>
				 	<text class="title">{{item.title}}</text>
				 </view>
				 <view class="item" v-else>
				 	<view class="ip-thumb select-box-no" >
				 		<image mode="aspectFill" hover-class="hover" :src="item.thumb + '?x-oss-process=image/resize,w_250'"></image>
				 	</view>
				 	<text class="title">{{item.title}}</text>
				 </view>
					
				</view>
			</view>
		</scroll-view>
		
		<view class="list">
			<view class="item"  v-for="(item, index) in guessList" :key="item.uuid" @tap="toProductDetail(item)">
				<view class="thumb-c">
					<image class="p-tag" :class="theme + ' ' + grid + ' location-' + item.image_tag.location" :src="item.image_tag.image"
					 v-if="item.image_tag"></image>
					<image mode="aspectFill" :src="item.thumb + '?x-oss-process=image/resize,w_500'" class="thumb"></image>
					<view class="presell-c" v-if="item.is_presell">预售</view>
					<view class="empty-stock"  v-if="item.stock === 0">
						<image src="@/static/empty-stock.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="right" style="width: 100%;">
					<view class="title">
						{{item.title}}
					</view>
					<view class="sub-title" v-show="false">
						{{item.sub_title}}
					</view>
					<!-- <view class="tag-list">
						<view class="tag-item" :key="index" v-for="(item, index) in item.tags">{{item}}</view>
					</view> -->
					<view v-show="false" class="" style="display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
						<view class="price-c">
							<PriceDisplay :info="item"></PriceDisplay>
						</view>
						<view class="sales">
							{{item.sales}}+购买
						</view>
					</view>
					
					<!-- 商品价值 -->
					<view class="goods_value" v-show="false">
						<view class="name">商品价值</view>
						<view class="price">{{(item.money_price/100).toFixed(2)}}-{{(item.money_price/100).toFixed(2)}}元</view>
					</view>
					<view class="title">展示列表</view>
					<!-- skus -->
					<view class="category-menu1">
						<view class="item1" v-for="(item1,index) in item.skus.slice(0, 5)" :key="index">
							<view class="ip-thumb1">
								<image mode="aspectFill" hover-class="hover" :src="item1.thumb + '?x-oss-process=image/resize,w_250'"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		props: {
			refreshCounter: {
				type: Number
			},
			getNextPageCounter: {
				type: Number
			}
		},
		data() {
			return {
				m_status:false,
				list: [],
				guessList: [],
				page: 1,
				per_page: 20,
				activeCategory: '',
				itemType: 'activity',
			};
		},
		watch: {
			refreshCounter () {
				console.log(111);
				this.initData()
			},
			getNextPageCounter () {
				console.log("到底了");
				this.getProductList()
			}
		},
		mounted () {
			console.log(111);
			this.initData()
		},
		methods: {
			initData() {
				var self = this;
				self.$http('/ip/categories', 'GET', {
					per_page: 500
				}).then(res => {
					self.list = res.data.list;
					self.activeCategory = self.list[0].id;
					self.page = 1;
					// this.guessList = [];
					self.getProductList();
				})
			},
			
			getProductList() {
				var self = this;
				self.$http('/search', 'POST', {
					category_id: self.activeCategory,
					page: self.page,
					item_type: self.itemType
				}).then(res => {
					if (self.page == 1) {
						self.guessList = res.data.list;
					} else {
						self.guessList.push(...res.data.list)
					}
					this.m_status = !this.m_status;
					//触发动画
					self.page ++
				})
			},
			
			
			handleClick(item) {
				
				this.activeCategory = item.id;
				this.page = 1;
				// this.guessList = [];
				this.getProductList();
			},
			
			toProductDetail(item) {
				console.log('click ====>', item)
				let url = '';
				if (item.item_type == 'product') {
					url = '/pages/productDetail/index?uuid=' + item.uuid
				} else if (item.item_type == 'box') {
					url = '/pages/boxDetail/index?uuid=' + item.uuid
				} else if (item.item_type == 'yifanshang') {
					
					if (item.type === 'egg_lottery') {
						url = `/pages/eggLottery/detail?uuid=${item.uuid}`
					}
					else {
						url = `/pages/${item.item_type}/detail?uuid=${item.uuid}`
					}
					
				}
				uni.navigateTo({
					url: url
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		border-radius: 24rpx;
		background-color: #EFEFEF;
	}
	.goods_value{
		display: flex;
		font-size: 22rpx;
		margin: 5rpx 0rpx;
		.name,.price{
			padding: 0rpx 15rpx;
			border: 1rpx solid #000000;
			font-family: youshe;
		}
		.name{
			background-color: #000000;
			color: #fff;
		}
		.price{
			color: #000000;
		}
	}
	.category-menu {
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin: 30rpx 30rpx;
		.item {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			margin-right: 14rpx;
			
			
			.ip-thumb {
				width: 95rpx;
				height: 95rpx;
				border-radius: 50%;
				box-shadow: 0px 14px 30px 0px rgba(226, 222, 204, 0.4);
				
				
				
				&.active {
					position: relative;
					&:after {
						content: "";
						position: absolute;
						top: -2px;
						left: -2px;
						width: 100%;
						height: 100%;
						border: 2px solid #ffcc00;
						border-radius: 50%;
					}
				}
			}
			.select-box {
				box-shadow: 0 0 0 4rpx #000000, 0 0 0 8rpx #4f4f4f, 0 0 0 12rpx #bcbcbc ;
				animation: pulse;
				animation-duration: 0.8s;
				
			}
			.select-box-no {
				box-shadow: 0 0 0 4rpx #adadad, 0 0 0 8rpx #fff,  0 0 0 12rpx #999999;
			}
			
			.select_c {
				background-color: red;
			}
	
			image {
				width: 95rpx;
				height: 95rpx;
				border-radius: 50%;
			}
			
			.title {
				font-family: youshe;
				text-align: center;
				width: 120rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}
	
			text {
				margin-top: 10rpx;
				color: #333;
				font-weight: 500;
				font-size: 22rpx;
				line-height: 30rpx;
			}
		}
	}
	.m-right{
		animation: bounceInRight;
		animation-duration: 0.7s;
	}
	.m-left{
		animation: bounceInLeft;
		animation-duration: 0.7s;
		animation-iteration-count:1
	}
	.list {
		margin: -10rpx 30rpx;
		.item:hover{
			animation: pulse;
			animation-duration: 0.5s;
		}
		.item {
			display: flex;
			padding: 15rpx;
			box-sizing: content-box;
			// border-bottom: 1rpx solid #F1F1F1;
			border: 5rpx solid #000000;
			align-items: center;
			margin-bottom: 15rpx;
			border-radius: 10rpx;
			background-color: white;
			// &.disableLine {
			// 	border-bottom: 0rpx solid #F1F1F1;
			// }
			
			.thumb-c {
				// position: relative;
				
				// width: 180rpx;
				// height: 180rpx;
				margin-right: 30rpx;
				border-radius: 20rpx;
				flex: 0 0 140rpx;
				// overflow: hidden;
				
			
				.thumb {
					width: 150rpx;
					height: 150rpx;
					display: block;
					border-radius: 10rpx;
				}
				
				.presell-c {
					position: absolute;
					width: 100%;
					text-align: center;
					background: rgba(230, 49, 17, 0.5);
					color: white;
					left: 0rpx;
					bottom: 0rpx;
					font-size: 24rpx;
					padding: 6rpx 0rpx;
				}
			
				.p-tag {
					position: absolute;
					width: 70rpx;
					height: 70rpx;
					// right: 0rpx;
					top: 0rpx;
			
					// 右上角
					&.location-1 {
						right: 0rpx;
					}
			
					// 右上角
					&.location-2 {
						left: 0rpx;
					}
			
					&.grid2 {
						width: 100rpx;
						height: 100rpx;
					}
			
				}
				
				.empty-stock {
					position: absolute;
					width: 100%;
					height: 100%;
					top: 0rpx;
					left: 0rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					image {
						width: 50%;
					}
					background: rgba(0, 0, 0, 0.5);
				}
			}

			.category {
				// background:rgba(241,241,241,1);
				color: #393939;
				font-size: 22rpx;
				display: inline-block;
				margin: 20rpx 0rpx 10rpx 0rpx;
				// padding: 4rpx 8rpx;
			}

			

			.title {
				color: #393939;
				font-size: 30rpx;
				font-weight: bold;
				font-family: youshe;
				// min-height: 100rpx;
				// margin-top: 10rpx;
				
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;

				.title-tag {
					height: 40rpx;
					line-height: 40rpx;
					background: #FFCC09;
					border-radius: 16px;
					color: white;
					font-size: 22rpx;
					padding: 0rpx 14rpx;
					margin-right: 10rpx;

					&.activity {
						background: #F27233;
					}
				}
			}
			.sub-title {
				color: #cccccc;
				font-size: 22rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				margin-top: 5rpx;
			}
			.sales {
				color: #cccccc;
				margin-right: 20rpx;
				font-size: 24rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.tag-list {
				display: flex;

				.tag-item {
					height: 36rpx;
					background: #F7F7F7;
					border-radius: 20rpx;
					font-size: 22rpx;
					font-weight: 500;
					color: #999999;
					line-height: 36rpx;
					padding: 0rpx 12rpx;
					max-width: 180rpx;
					margin-right: 10rpx;

					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
				}
			}

			.price-c {
				color: #010101;
				font-weight: 500;
				margin-right: 20rpx;
				font-size: 32rpx;
				
				.line-price {
					color: #B3B3B3;
					font-size: 24rpx;
					text-decoration: line-through;
				}
			}

			.sale {
				color: #B3B3B3;
				font-size: 24rpx;
				margin-right: 20rpx;
			}
			
			.value {
				background-color: #000000;
				color: #FFFFFF;
				font-size: 24rpx;
				padding: 5rpx 20rpx;
				flex-direction: row;
				display: flex;
				.price1  {
					background-color: white;
					padding: 0 10rpx;
					color: #000000;
					margin-left: 10rpx;
				}
			}
			
			.category-menu1 {
				display: flex;
				// justify-content: space-between;
				// width: 100%;
				// margin: 30rpx 30rpx;
				margin-top: 20rpx;
			
				.item1 {
					display: flex;
					align-items: center;
					justify-content: center;
					// flex-direction: column;
					
					.ip-thumb1 {
						margin-right: 25rpx;
						// width: 80rpx;
						// height: 80rpx;
						// border-radius:10rpx;
						// box-shadow: 0px 14px 30px 0px rgba(226, 222, 204, 0.4);
						
					}
			
					image {
						width: 60rpx;
						height: 60rpx;
						border-radius: 5rpx;
					}
				}
			}
			
		}
		
	}
	
	
</style>